import React from 'react';
import { Card, Divider, Row, Col } from 'antd';
import logo from '@/assets/orgListLogo.png';
import moment from 'moment';
import CityPicker from '@/components/CityPicker';
import styles from './index.less';
import { getOrgInfo } from '../../services';

const TopOrgInfo = () => {
    const [info, setInfo] = React.useState('');
    const featchList = async () => {
        const res = await getOrgInfo();
        if (res.code === 10000) {
            setInfo(res.data);
        }
    };
    React.useEffect(() => {
        featchList();
    }, []);

    return (
        <Card bordered={false} className={styles.topOrgInfoWrap}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
                <img className={styles.logo} alt="logo" src={logo} />
                <span className={styles.orgName}>{info.organizationName}</span>
            </div>
            <div className={styles.infoRow}>
                <Row gutter={16}>
                    <Col className={styles.col}>
                        国家/地区：
                        <div className={styles.cityWrapper}>
                            <CityPicker showOnly valueType="codeArray" value={info?.area?.split(',') || []} />
                        </div>
                    </Col>
                    <Col className={styles.col}>
                        创建时间：<span>{info.regTime ? moment(info.regTime).format('YYYY-MM-DD') : null}</span>
                    </Col>
                    <Col className={styles.col}>
                        集团总数：<span>1</span>
                    </Col>
                    <Col className={styles.col}>
                        公司总数：<span>{info.companyNumber || 0}</span>
                    </Col>
                    <Col className={styles.col}>
                        部门总数：<span>{info.underDepartmentNumber || 0}</span>
                    </Col>
                    <Col className={styles.col}>
                        员工总数：<span>{info.allEmployeeNum || 0}</span>
                    </Col>
                </Row>
            </div>
            <Divider style={{ margin: '0 auto' }} />
        </Card>
    );
};

export default TopOrgInfo;
